<template>
	<su-popup :show="modelValue" type="top" round="10" :space="sys_navBar + 40" backgroundColor="#fff"
		:zIndex="10" @close="emit('update:modelValue',false)">
		<view class="comp-content">
			<view class="filter-list-box">
				<template v-for="item in list" :key="item.value">
					<c-option :label="item.label" :activeColor="activeColor"  @tap="onTab(item)" :active="item.value == state.active "/>
				</template>
			</view>
		</view>
	</su-popup>
</template>

<script setup>
	import sheep from '@/sheep';
	import { reactive, computed, onBeforeUnmount,nextTick } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
	import cOption from './c-option.vue';
	import { cloneDeep } from 'lodash'
	const sys_navBar = sheep.$platform.navbar;
	const emit = defineEmits(['update:modelValue','change'])
	const props = defineProps({
		modelValue:{
			type:Boolean,
			default:false
		},
		activeColor: {
			type: String,
			default: '#1AC6A0'
		},
		data:{
			type:Object,
			default:()=>({})
		}
	})
	const state = reactive({
		active:''
	})
	const list = [
		{ label: '综合排序', value: '' },
		{ label: '离我最近', value: '50' },
	]
	onLoad((opt)=>{

	})
	function onTab(item){
		state.active = item.value
		emit('change',cloneDeep(item))
		emit('update:modelValue',false)
	}
	
</script>

<style lang="scss" scoped>
	.comp-content{
		.filter-list-box {
			padding: 28rpx 52rpx;
		
			.filter-item {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				line-height: normal;
				margin-bottom: 24rpx;
		
				&:nth-last-child(1) {
					margin-bottom: 0;
				}
			}
		
			.filter-item-active {
				color: #1AC6A0;
			}
		}
	}
</style>